<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
.demo1{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.demo2{
  display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
  </style>
</head>
<body>
  <!-- [css] 实现单行文本居中和多行文本左对齐并超出显示"..." -->
  <div class="demo1">这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本<!-- [css] 实现单行文本居中和多行文本左对齐并超出显示"..." --></div>
  <div class="demo2">这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本
    这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本
    这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本
    这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本<!-- [css] 实现单行文本居中和多行文本左对齐并超出显示"..." --></div>
  <div class="demo"><!-- [css] 实现单行文本居中和多行文本左对齐并超出显示"..." --></div>

  <hr>
</body>
<script type="text/javascript">
  const text = `这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本
    这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本
    这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本
    这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本`;
  const totalTextLen = text.length;
  const formatStr = () => {
      const ele = document.getElementsByClassName('demo')[0];
      const lineNum = 2;
      const baseWidth = window.getComputedStyle(ele).width;
      const baseFontSize = window.getComputedStyle(ele).fontSize;
      const lineWidth = +baseWidth.slice(0, -2);

      // 所计算的strNum为元素内部一行可容纳的字数(不区分中英文)
      const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));

      let content = '';
      
      // 多行可容纳总字数
      const totalStrNum = Math.floor(strNum * lineNum);

      const lastIndex = totalStrNum - totalTextLen;

      if (totalTextLen > totalStrNum) {
          content = text.slice(0, lastIndex - 3).concat('...');
      } else {
          content = text;
      }
      ele.innerHTML = content;
  }
  
  formatStr();
  
  window.onresize = () => {
      formatStr();
  };
</script>

<body>
<div class='demo'></div>
</body>

</html>